<template>
<div id="footer">
    <ul>
        <router-link tag="li" to="/movie" >
            <i class="fa fa-film"></i>
            <p>电影</p>
        </router-link>
                <router-link tag="li" to="/cinema" >
            <i class="fa fa-square"></i>
            <p>影院</p>
        </router-link>
                <router-link tag="li" to="/mine" >
           <i class="fa fa-user-circle"></i>
            <p>我的</p>
        </router-link>
    </ul>
</div>
    
</template>
<script>
export default{
    name:'TabBar'
}


</script>
<style scoped>
#footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    background: white;
    border-top: 2px solid #ccc;
}
li{
    display: inline-block;
    width: 33%;
    text-align: center;
}
.router-link-active{
    color:#E54847;
}

</style>
